<!-- 侧边栏 -->
<template>
    <el-aside :width="$store.state.isCollapse ? '180px' : '64px'">
        <el-menu active-text-color="#ffd04b" text-color="#fff" background-color="#545c64"
            :collapse="!$store.state.isCollapse" :collapse-transition="false">
                  <h3 v-show="$store.state.isCollapse">后台管理</h3>
                  <h3 v-show="!$store.state.isCollapse">后台</h3>
            <el-menu-item :index="item.path" v-for="item in noChildren()" :key="item.path" @click="handrouter(item)">
                <component class="icons" :is="item.icon"></component>
                <span>{{ item.label }}</span>
            </el-menu-item>
            <el-sub-menu :index="item.label" v-for="item in Children()" :key="item.label">
                <template #title>
                    <component class="icons" :is="item.icon"></component>
                    <span>{{ item.label }}</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item :index="subItem.path" v-for="(subItem, index) in item.children" :key="index" @click="handrouter(subItem)">
                        <component class="icons" :is="subItem.icon"></component>
                        <span>{{ subItem.label }}</span>
                    </el-menu-item>
                </el-menu-item-group>
            </el-sub-menu>
        </el-menu>
    </el-aside>
</template>

<script setup>
import { onMounted } from 'vue'
import {useRouter} from 'vue-router'
import { useStore } from 'vuex';
const store=useStore()
//默认侧边栏数据
const list = [
    {
        path: '/user',
        name: 'user',
        label: '用户管理',
        icon: 'user',
        url: 'UserManage/UserManage'
    },
    {
        label: '其他',
        icon: 'location',
        path: '/other',
        children: [
            {
                path: '/page1',
                name: 'page1',
                label: '页面1',
                icon: 'setting',
                url: 'Other/PageOne'
            },
            {
                path: '/page2',
                name: 'page2',
                label: '页面2',
                icon: 'setting',
                url: 'Other/PageTwo'
            }
        ]
    }
]
//获取vux中的侧边栏数据 替换到页面中
const newlist=store.state.menu
const router=useRouter()
//过滤出有子级和没有子集的项
const noChildren = () => {
    return newlist.filter((item) => !item.children)
}

const Children = () => {
    return newlist.filter((item) => item.children)
}
//点击跳转菜单栏跳转到指定页面
const handrouter=(item)=>{
       router.push({
        name:item.name
       })
       store.commit('selectMenu',item)
}
onMounted(() => {
    console.log(noChildren());
});
</script>


<style scoped lang="less">
.icons {
    height: 18px;
    width: 18px;
}
.el-aside{
    height: 100%;
    .el-menu {
    border: none;
    height: 100%;
    h3{
        line-height: 48px;
        color: #fff;
        text-align: center;
    }
}
}

</style>